import React, { Component } from "react";
import { connect } from "react-redux";
import { setNameAction } from "./store/actionsCreators";
class Home extends Component {
  render() {
    // console.log(this.props);
    return (
      <div>
        <h2 dangerouslySetInnerHTML={{ __html: this.props.userName }}></h2>
        <input
          type="text"
          value={this.props.userName}
          onChange={this.props.setNameAction}
        />
      </div>
    );
  }
}

// mapStateToProps:reducer里的状态到当前组件的属性上
const mapStateToProps = ({ data }) => {
  // console.log(data);
  return {
    userName: data.name
  };
};
const mapDispatchToProps = dispatch => {
  return {
    // 修改动作的方法
    setNameAction({ target }) {
      dispatch(setNameAction(target.value));
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home); // 使用连接器
